<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%;" id="main"></div>
    <!-- 3d消息弹窗 -->
    <cesiumMsgbox
      v-for="item in msgboxarr"
      :diahtml="item.diahtml"
      :options="item.options"
      :key="item.uid"
    />
    <el-button type="primary" size="default" @click="savedata()" style="position: absolute; top: 100px; right: 50px;z-index: 9999;">保存配置</el-button>
    
  </div>
</template>

<script>

// import geo from '/zz.json'
import axios from "@/utils/requestshujuyuan";
import { Base64 } from "js-base64";
import cesiummixins from "@/mixins/bigScreen/threeDimensional/cesiumMixins";

import gongre from "../mixins/3d/geojson/3dgongre";
import nengxiao from "../mixins/3d/geojson/3dnengxiao";

// 1 创建Earth的vue组件
export default {
  components: {
    // efficcom
  },
  mixins: [cesiummixins, gongre, nengxiao],
  data() {
    return {
      //地球
      _earth: undefined,
      _viewer: undefined,
      //geojson数据源
      ds: [],
      //照相机高度
      camheight: 0,
      //3d消息弹窗
      msgboxarr: [],
      //pin id数组
      pinarr: [],
    };
  },
  // 1.1 资源创建
  mounted() {},

  watch: {
    "$store.state.editer.rootsetting": {
      handler: function (n, o) {
        if (_.has(n, "scene")) {
          this.ld();
        }
      },
      immediate: true,
    },
  },

  methods: {
    savedata(){
      
      console.log(this._earth.toJSON());
      this.$store.state.editer.rootsetting["scene"] = this._earth.toJSON()

      axios
        .post("update", {
          dpkey: this.$store.state.editer.editerdpconfig.dpkey,
          dpvalue: Base64.encode(JSON.stringify(this.$store.state.editer.rootsetting)),
        })
        .then((res) => {
          this.$message({'message': "保存成功", offset : 250, type : "success"})
          console.log(res);
        });
    },
    ld() {
      XbsjEarthUI.create("main").then((earthUI) => {
        //隐藏主工具栏
        // earthUI.controls.mainBar.show = false;
        // earthUI.controls.timelineBar.show = false;
        //隐藏图层管理
        // earthUI.tools.sceneTree.show = false;
        // only for Debug
        window.uia = earthUI;

        this._earth = earthUI.earth;
        this._viewer = earthUI.earth.viewer;

        this.loadData();
      });
    },
    loadData() {
      this._earth.xbsjFromJSON(this.$store.state.editer.rootsetting["scene"]);

      // this._earth.cameraViewManager = scene.cameraViewManager;

      // this._earth.sceneTree.root.children.push();

      // this._earth.sceneTree.root.children.push();
    },
  },
};
</script>

<style lang="scss">
.cesiumdialog {
  position: absolute;
  width: 180px;
  min-height: 200px;
  color: white;
  background-image: url("/configuration/cesium/dialog.png");
  background-size: 100% 100%;
  padding: 5px;
  border-radius: 5px;
  // cursor: pointer;
}
.cesium-performanceDisplay {
  position: absolute;
  top: 50%;
  left: -1000px;
}
</style>